<template>
  <div>
    <nav-bar title="加班详情"></nav-bar>
    <div class="maxinBox" v-if="data">
      <van-row>
        <van-col :span="24" class="title">
          <div>
            申请详情
          </div>
        </van-col>
      </van-row>
      <van-cell title="申请人" v-if="data.leader === 2" :value="`${data.applyName}(班组长)`"/>
      <van-cell title="申请人" v-else :value="data.applyName"/>
      <van-cell title="申请日期" :value="data.applyDate"/>
      <van-cell title="班组" :value="data.team"/>
      <van-cell title="加班人员" :value="data.userNames"/>
      <van-cell class="marginTop5" title="开始日期" :value="data.startDate" v-if="user && user.userType === '01'"/>
      <van-cell title="开始日期" :value="data.startDate" v-else/>
      <van-cell title="结束日期" :value="data.endDate"/>
      <van-cell title="加班时长" :value="data.overTime"/>
      <van-cell title="加班原因" :value="data.content"/>
      <div v-if="user && user.userType == '02' && data.status !== '1'">
        <van-row>
          <van-col :span="24" class="title">
            <div>
              审批详情
            </div>
          </van-col>
        </van-row>
        <van-cell title="审批状态" v-if="data.status === '1'" value="待审批"/>
        <van-cell title="审批状态" v-else-if="data.status === '2'" value="已通过"/>
        <van-cell title="审批状态" v-else value="已驳回"/>
        <van-cell title="审批人" :value="data.approve"/>
        <van-cell title="审批时间" :value="data.approveDate"/>
      </div>
      <div v-if="user && user.userType === '01' && data.status === '1'">
        <div class="marginTop5 center" style="padding: 0.3125rem 1.25rem;">
          <van-button type="danger" native-type="onSubmit" @click="onSubmit(3)">
            驳回
          </van-button>
          <van-button type="info" native-type="onSubmit" @click="onSubmit(2)">
            通过
          </van-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import overtimePayManage from '../../../../api/workAPI/overtimePayManage.js'
  export default {
    data() {
      return {
        data: null,
        user: {
          userStatus: '',
          userType: '',
        }
      }
    },
    methods: {
      getData() {
        overtimePayManage.getWorkOvertimeDetails(JSON.parse(localStorage.getItem('overTimeData')).id).then(res => {
          this.data = res
        })
      },
      onSubmit(datas) {
        let data = {
          status: datas,
          overTimeId: JSON.parse(localStorage.getItem('overTimeData')).id
        }
        overtimePayManage.approvalWorkOvertime(data).then(res => {
          this.$toast.success('处理完成')
          this.$router.push({
            name: 'OvertimePayManage'
          })
        })
      }
    },
    mounted() {
      this.getData()
      this.user.userStatus = localStorage.getItem('userStatus')
      this.user.userType = localStorage.getItem('userType')
    }
  }
</script>

<style scoped lang="scss">
.title{
    padding: 0.625rem;
    font-size: 0.875rem;
    div{
      margin: 0.3125rem;
      border-left: 0.125rem solid #1577FF;
      padding-left: 0.3125rem;
    }
  }
</style>
